<template>
	<view>
		<cu-custom class="navBox" bgColor="bg-gradual-blue" :isBack="true">
			<!-- <block slot="backText">返回</block>
			<block slot="content">地图轨迹</block> -->
		</cu-custom>

		<view class="container">
			<map id='map' :latitude="latitude" :longitude="longitude" :markers="covers"
				:style="{ width: '100%', height: mapHeight + 'px' }" :scale="13" :polyline="polyline">
			</map>

			<view class="btnBox">
				<button :disabled="isDisabled" @click="start" class="cu-btn bg-blue round shadow lg">轨迹回放</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				map: null,
				windowHeight: 0,
				mapHeight: 0,
				timer: null,
				isDisabled: false,
				isStart: false,
				playIndex: 1,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: '',
				longitude: '',
				// 标记点
				covers: [{
					id: 1,
					width: 50,
					height: 30,
					rotate: 270,
					latitude: 24.359247,
					longitude: 102.541254,
					iconPath: '/static/car.png',
					callout: {
						content: "云F1735L", // 车牌信息
						display: "ALWAYS",
						fontWeight: "bold",
						color: "#5A7BEE", //文本颜色
						fontSize: "12px",
						bgColor: "#ffffff", //背景色
						padding: 5, //文本边缘留白
						textAlign: "center",
					},
					anchor: {
						x: 0.5,
						y: 0.5,
					},
				}],

				// 线
				polyline: [],

				// 坐标数据
				coordinate: [
					// {
					// 	latitude: 24.369247,
					// 	longitude: 102.541254,
					// 	problem: true,
					// },
					// {
					// 	latitude: 24.369347,
					// 	longitude: 102.551354,
					// 	problem: true,
					// },
					// {
					// 	latitude: 24.379447,
					// 	longitude: 102.551454,
					// 	problem: true,
					// },
					// {
					// 	latitude: 24.379547,
					// 	longitude: 102.561554,
					// 	problem: true,
					// },
					// {
					// 	latitude: 24.389647,
					// 	longitude: 102.571654,
					// 	problem: true,
					// }
				],
				posi: { // 汽车定位点的数据，后面只用改latitude、longitude即可
					id: 1,
					width: 25,
					height: 40,
					latitude: 0,
					longitude: 0,
					iconPath: "/static/car.png",
					callout: {
						content: "云F1735L", // 车牌信息
						display: "BYCLICK",
						fontWeight: "bold",
						color: "#5A7BEE", //文本颜色
						fontSize: "12px",
						bgColor: "#ffffff", //背景色
						padding: 5, //文本边缘留白
						textAlign: "center",
					},
					anchor: {
						x: 0.5,
						y: 0.5,
					},
				}
			}
		},
		onLoad() {
			uni.request({
				url: 'http://v7.cvimp.com/StandardApiAction_vehicleStatus.action?jsession=cf6b70a3-c82b-4392-8ab6-bbddce336222&vehiIdno=云F1735L&geoaddress=1',
				success: (e) => {
					this.latitude = e.data.infos[0].mlat
					this.longitude = e.data.infos[0].mlng
				}
			});
			uni.request({
				url: 'http://v7.cvimp.com/StandardApiAction_login.action?account=cwyxdy&password=000000',
				success: (e) => {
					var jsession=e.data.jsession
					uni.request({
						url: 'http://v7.cvimp.com/StandardApiAction_getDeviceByVehicle.action?jsession=' +
							 jsession+ '&vehiIdno=云F1735L',
						success: (e) => {
							var did=e.data.devices[0].did
							uni.request({
								url: 'http://v7.cvimp.com/StandardApiAction_queryTrackDetail.action?jsession='+jsession+'&devIdno='+did+'&begintime=2021-08-31 00:00:00&endtime=2021-08-31 23:59:59&toMap=1',
								success: (e) => {
									for(var i in e.data.tracks){
										var temp_obj={};
										temp_obj['latitude']=e.data.tracks[i].mlat;
										temp_obj['longitude']=e.data.tracks[i].mlng;
										this.coordinate.push(temp_obj)
									}
								}
							});
						}
					});
				}
			});
		},
		watch: {

		},
		onReady() {
			// 创建map对象jsession
			this.map = uni.createMapContext('map');
			// 获取屏幕高度
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight;
				}
			});
		},
		mounted() {
			this.setNavTop('.navBox')

			this.polyline = [{
				points: this.coordinate,
				color: '#025ADD',
				width: 4,
				dottedLine: false,
			}];
		},
		methods: {
			setNavTop(style) {
				let view = uni.createSelectorQuery().select(style);
				view
					.boundingClientRect(data => {
						this.mapHeight = this.windowHeight - data.height;
					})
					.exec();
			},
			start() {
				this.isStart = true;
				this.isDisabled = true;
				let data = this.coordinate;
				let len = data.length;
				let datai = data[this.playIndex];
				let _this = this;

				_this.map.translateMarker({
					markerId: 1,
					autoRotate: true,
					destination: {
						longitude: datai.longitude, // 车辆即将移动到的下一个点的经度
						latitude: datai.latitude, // 车辆即将移动到的下一个点的纬度
					},
					duration: 700,
					complete: function() {
						_this.playIndex++;
						if (_this.playIndex < len) {
							_this.start(_this.playIndex, data);
						} else {
							console.log('okokok');
							uni.showToast({
								title: '播放完成',
								duration: 1400,
								icon: 'none'
							});
							_this.playIndex = 0;
							_this.isStart = false;
							_this.isDisabled = false;
						}
					},
					animationEnd: function() {
						// 轨迹回放完成
					},
					fail(e) {
						// 轨迹回放失败
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
	}

	.btnBox {
		width: 750rpx;
		position: absolute;
		bottom: 60rpx;
		z-index: 99;
		display: flex;
		justify-content: space-around;
	}
</style>
